<template>
<div class="find-container">
  <!-- 导航栏 -->
 
  <!-- 轮播图 -->
  <div class="swipe">
    <mt-swipe :auto="4000">
    <mt-swipe-item v-for='(item,index) in banners' :key='index'><img v-lazy="item.imageUrl" alt=""></mt-swipe-item>
  </mt-swipe>
  </div>
  <!-- 图标列 tab-->
  <div class="tab">
   <div id="slider" class="mui-slider" style="top:245px">
      <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <div class="mui-scroll">
          <a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
             <span><img src="../assets/image/IMG_01.jpg" alt=""></span><p>推荐</p></a>
          <a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
            <span><img src="../assets/image/IMG_01.jpg" alt=""></span>
           <p> 每日推荐</p></a>
          <a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">歌单</a>
          <a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">排行榜</a>
          <a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">电台</a>
          <a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">直播</a>
          <a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">数字专辑</a>
        </div>
      </div>
    </div>
  </div>
    <!-- 推荐歌单 -->
  <div class="recommend">
      <div class="top"><p>歌单</p> <p>查看更多</p></div>
      <div class="info">
        <div id="slider" class="mui-slider">
				 <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html" v-for="(item,index) in recommend" :key='index'>
              <img :src="item.picUrl" alt="" class="class">
              <textarea name="" id="" cols="40" rows="20" :placeholder="item.name">
               </textarea> 
              <span><svg class="bi bi-caret-right" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
             <path fill-rule="evenodd" d="M6 12.796L11.481 8 6 3.204v9.592zm.659.753l5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753z"/>
               </svg>{{item.playCount}}</span>
						</a>
         
					</div>
				</div>
      </div>
      </div>
  </div>
  <!-- 推荐歌曲 -->
  <div class="recommend-song">
      <div class="top"><p>歌单</p> <p>播放全部</p></div>
      <div class="info">  <div id="slider" class="mui-slider">
      <div
        id="sliderSegmentedControl"
        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" >
        <div class="mui-scroll">
          <a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
            <ul> <li class="songlist" v-for="(item,index) in recommendsongs" :key='index'>
            <img :src="item.picUrl" alt="">
            <div class="songinfo"><span class="name">{{item.name}} <span>{{item.song.artists[0].name}}</span></span><p>ddd</p>
            </div>
            </li> 
            </ul>
             </a>
       <a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html"> <div class="songlist"><img src="../assets/image/IMG_01.jpg" alt="">
          <div class="songinfo"><span class="name">ren <span></span></span><p>ddd</p></div>
          </div>sssss </a>
          <a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">北京</a>
          <a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">社会</a>
          <a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">娱乐</a>
          <a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">科技</a>
        </div>
      </div>
    </div></div>
  </div>
</div>
</template>

<script>
import  '../../node_modules/bootstrap/dist/css/bootstrap.css'
import  '../assets/find.css'
import mui from '../assets/mui/js/mui.js'
import {  Host } from '../api/common.js';
import axios from 'axios'
export default {
  name: 'Find',
  data () {
    return {
      banners: [],
      tag:'发现',
      recommend:[],
      recommendsongs:[]
    }
  },
  created(){
      this.getBanners(),
      this.getRecommend(),
      this.getRecommendSongs()
  },
    mounted() {
    //手动初始化滑动空控件
    mui(".mui-scroll-wrapper").scroll({
      scrollY: true, //是否竖向滚动
		 scrollX: false, //是否横向滚动
		 startX: 0, //初始化时滚动至x
		 startY: 0, //初始化时滚动至y
		 indicators: true, //是否显示滚动条
	  	deceleration:0.0006, //阻尼系数,系数越小滑动越灵敏
		 bounce: true //是否启用回弹
    });
    mui('body').on('tap','a',function(){document.location.href=this.href;});
  },
  methods:{
    getBanners(){
      axios.get(Host+'/banner').then(res=>{
       /*  console.log(res) */
        this.banners= res.data.banners
      })
    },
    getRecommend(){
      axios.get(Host+'/personalized').then(res=>{
        /*  console.log(res) */
         this.recommend=res.data.result
         this.recommend=this.recommend.slice(0,7)
      })
    },
    getRecommendSongs(){
      axios.get(Host+'/personalized/newsong').then(res=>{
        console.log(res)
        this.recommendsongs=res.data.result.slice(0,3)
      })

    }


  } 
}
  
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* { touch-action: none; } 
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
</style>
